<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
   let a='sdf'
   function bibao(){
     
        debugger;
        console.log(a)
      
   }

   bibao()

    let pointxDom,pointyDom,btn,i=0;
    window.onload=function(){
       pointxDom=document.getElementById('pointx');
       pointyDom=document.getElementById('pointy');
       btnDom=document.getElementById('btn');
       btnDom.onclick=function(){
        setPoint(3,4)
       }
    }
    function setPoint(x=0,y=0){
        pointxDom.textContent=x
        pointyDom.textContent=y
    }
   
</script>
<body>
    <div id="pointx">0</div>
    <div id="pointy">0</div>
    <button id="btn">setPoint</button>
</body>
</html> -->

<div id="outer">
  <div id="inner">Click me</div>
</div>

<script>
  const outer = document.getElementById("outer");
  const inner = document.getElementById("inner");

  // 捕获阶段监听器
  outer.addEventListener(
    "click",
    () => {
      console.log("捕获阶段");
      Promise.resolve().then(() => console.log("捕获阶段的微任务"));
    },
    true
  );

  // 目标阶段监听器
  inner.addEventListener("click", () => {
    console.log("目标阶段");
    Promise.resolve().then(() => console.log("目标阶段的微任务"));
  });

  // 冒泡阶段监听器
  outer.addEventListener("click", () => {
    console.log("冒泡阶段");
    Promise.resolve().then(() => console.log("冒泡阶段的微任务"));
  });
</script>

<div id="outer1" onclick="outer1Fn()">
  <div id="inner1" onclick="inner1Fn()">Click me1</div>
</div>
<script>
  function outer1Fn() {
    console.log("冒泡阶段");
    Promise.resolve().then(() => console.log("冒泡阶段的微任务"));
  }
  function inner1Fn() {
    console.log("目标阶段");
    Promise.resolve().then(() => console.log("目标阶段的微任务"));
  }
</script>
